<!--菜单：能耗预警中的
日期能耗预警-->
<template>
    <div class="dayWarn">
        <!--        存放筛选条件-->
        <el-row class="top">
            <el-col :span="3.5">
                <div class="grid-content bg-purple box-left">
                    <span>月份：</span>
                    <div class="block" style="display: inline">
                        <el-date-picker
                            align="right"
                            type="date"
                            size="mini"
                            v-model="Mydate"
                            style="width: 150px"
                            placeholder="选择日期"
                        >
                        </el-date-picker>
                    </div>
                </div>
            </el-col>
            <el-col :span="3.5">
                <div class="grid-content bg-purple-light box-mid-left">
                    <span>与前 </span>
                    <el-input-number class="avg" size="small" v-model="num" controls-position="right"
                                     :min="1"></el-input-number>
                    <span> 月平均值比较   </span>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple box-mid">
                    <span>预留百分比： </span>
                    <el-input-number class="percent" size="small" v-model="avg" controls-position="right" :min="1"
                                     step="0.01"></el-input-number>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple-light box-mid-right">
                    <el-button size="mini" class="btn" @click="searchMsg" plain>查询</el-button>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple-light box-right">
                    <el-button size="mini" class="btn" plain @click="exportData">导出</el-button>
                </div>
            </el-col>
        </el-row>
        <div class="bottom">
            <el-table
                :data="tableDayData"
                :cell-style="{textAlign:'center',padding:'0'}"
                style="width: 100%"
                :default-sort="{prop: 'date', order: 'descending'}"
                :header-cell-style="{backgroundColor:'#F5F8FF',textAlign:'center',padding:'0'}"
                height="100%"
                border
            >
                <el-table-column
                    prop="id"
                    label="#"
                    sortable
                    width="150px">
                </el-table-column>
                <el-table-column
                    prop="table_id"
                    label="表号"
                    sortable
                    style="text-align: center"
                    width="270px">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="名称"
                    sortable
                    width="150px">
                </el-table-column>
                <el-table-column
                    prop="start_end_date"
                    label="起结时间"
                    sortable>
                </el-table-column>
                <el-table-column
                    prop="enc"
                    label="能耗"
                    sortable
                    width="190px">
                </el-table-column>
                <el-table-column
                    prop="consult"
                    label="参考"
                    sortable
                    width="200px">
                </el-table-column>
                <el-table-column
                    label="是否超标"
                    width="200px"
                >
                    <div class="slot"></div>
                </el-table-column>
            </el-table>
        </div>
    </div>

    <!--        存放数据-->

</template>

<script>
export default {
    name: "dayWarn",
    data() {
        return {
            Mydate: '',
            num: 3,
            avg: 10.00,
            tableDayData: []
        }
    },
    mounted() {
        this.queryDayConsumption();
    },
    methods: {
        queryDayConsumption() {
            this.axios.get('/api/module8/DayCons').then(resp => {
                this.tableDayData = resp.data.list;
            })
        },
        //搜索数据
        searchMsg() {
            if (!this.Mydate || !this.num || !this.avg) {
                this.$message.error('输入信息不能为空');
            } else {
                this.axios.get('/api/module8/Daysearch', {
                    params: {
                        Mydate: this.Mydate,
                        num: this.num,
                        avg: this.avg
                    }
                }).then(resp => {
                    this.tableDayData = resp.data.list;
                })
            }
        },
        //    导出数据
        exportData() {
            this.axios.get('/api/module8/export').then(resp => {
                alert("暂无接口");
            })
        }
    }
}
</script>

<style scoped>
.dayWarn {
    width: 100%;
    flex: 1;
    overflow-x: scroll;
    display: flex;
    flex-direction: column;
}

.top {
    width: 100%;
}

.bottom {
    width: 100%;
    flex: 1;
}

.bottom > .el-table {
    height: 100%;
}

.el-col {
    position: relative;
    top: 7px;
}

/*    日期*/
.box-left {
    margin-left: 10px;
    font-size: 12px;

}

/*平均值比较*/
.box-mid-left {
    margin-left: 10px;
    font-size: 12px;
}

.box-mid {
    margin-left: 20px;
    font-size: 12px;
}

/*    平均值的框*/
.avg {
    width: 90px;
}

/*    百分比*/
.percent {
    width: 100px;
}

/*    按钮*/
.btn {
    width: 100px;
    height: 30px;
}

.slot {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background-color: #CA180B;
    margin: 0 auto;
}

.el-table th {
    padding: 0px 0px;
    color: black;
    font-size: 12px;
    height: 10px !important;
}

.el-table__body tr,
.el-table__body td {
    padding: 0px 0px;
    height: 10px;
    line-height: 30px;
}

.el-table_4_column_23 {
    text-align: center !important;
}

</style>
